<template>
  <el-dialog :model-value="dialogVisible" title="任务详情" width="55%" align-center @closed="handleCancel">
    <el-row class="item">
      <el-col :span="24">
        <label>任务名称: </label>
        <span>{{ form.data.jobName }}</span>
      </el-col>
    </el-row>
    <el-row class="item">
      <el-col :span="24">
        <label>调用目标: </label>
        <span>{{ form.data.invokeTarget }}</span>
      </el-col>
    </el-row>
    <el-row class="item">
      <el-col :span="12">
        <label>cron表达式: </label>
        <span>{{ form.data.cronExpression }}</span>
      </el-col>
      <el-col :span="12">
        <label>下次执行时间: </label>
        <span>{{ form.data.nextExecTime }}</span>
      </el-col>
    </el-row>
    <el-row class="item">
      <el-col :span="12">
        <label>错误策略: </label>
        <span>{{ filtersText['misfirePolicy'][form.data.misfirePolicy] }}</span>
      </el-col>
      <el-col :span="12">
        <label>运行(失败/总)次数: </label>
        <span>{{ form.data.failCount }}/{{ form.data.totalCount }}</span>
      </el-col>
    </el-row>
    <el-row class="item">
      <el-col :span="12">
        <label>状态: </label>
        <span>{{ filtersText['status'][form.data.status] }}</span>
      </el-col>
      <el-col :span="12">
        <label>是否并发: </label>
        <span>{{ filtersText['concurrent'][form.data.concurrent] }}</span>
      </el-col>
    </el-row>
    <el-row class="item" v-if="form.data.remark">
      <el-col :span="24">
        <label>备注: </label>
        <span>{{ form.data.remark }}</span>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { withDefaults, computed, reactive, nextTick } from 'vue'
import { ElDialog } from 'element-plus'
import { util } from '@/utils'
import { useJob } from './hook'
import { jobApi } from '@/api/modules/job/job'

const props = withDefaults(defineProps<{ visible: boolean }>(), {
  visible: false
})
const emits = defineEmits(['update:visible'])

const dialogVisible = computed(() => props.visible)

const { filtersText } = useJob()
const form = reactive<{ data: any }>({
  data: {}
})

const handleCancel = () => {
  emits('update:visible', false)
}

const setFormData = (data: any) => {
  nextTick(() => {
    form.data = util.cloneObject(data)
    jobApi.findRunInfo(data.jobId).then(resp => {
      if (resp.success) {
        for (const k in resp.data) {
          form.data[k] = resp.data[k]
        }
      }
    })
  })
}
defineExpose({ setFormData })
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 18px;
}
label {
  display: inline-block;
  margin-right: 8px;
  width: 120px;
  text-align: right;
  font-weight: bold;
}
</style>
